<template>
  <div class="sign">
    <div class="sign_main">
      <div class="sign_title">
        <img src="../../assets/image/sign_backgound.png" alt="" />
        <div class="sign_centar">
          <div class="sign_list" @click="signIn()" v-show="btnShow">
            <img src="../../assets/image/toSign.png" v-show="!this.isSign" />
            <img
              id="target"
              src="../../assets/image/goSign.png"
              v-show="this.isSign"
            />
            <div class="span">坚持每天连续签到可以获得多重奖励哦</div>
          </div>
  
        </div>
      </div>
      <div class="sign_center">
        <span class="sign_data">{{ year }}年{{ month }}月签到</span>
        <div class="date">
          <ul>
            <li class="lic" v-for="(v, i) in allDate" :key="i">
              <div :id="'bgColor' + v.date" class="bgColor">
                <div class="bgImg"></div>
                <span class="colorfff font12 dayPoint">{{ v.points }}</span>
              </div>
              <div class="font14 color999">{{ v.date }}日</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer">
        <div class="footer_title">
          <span class="iii">!</span>
          <span class="title">签到规则说明</span>
        </div>
        <div class="conter">
          <p class="color333">
            每天每客户可签到1次,获得积分奖励;连续签到累计次数当月有效,断签后重新累计,跨月重新累计.
          </p>
          <p class="color333">连续签到第1天至第7天,每次签到可获得50积分奖励;</p>
          <p class="color333">
            连续签到第8天至第14天,每次签到可获得150积分奖励;
          </p>
          <p class="color333">
            连续签到第15天至第21天,每次签到可获得300积分奖励;
          </p>
          <p class="color333">
            连续签到第22天至第31天,每次签到可获得500积分奖励;
          </p>
          <p class="color333">
            签到奖励积分自动存入积分账户,请在积分记录中查看;
          </p>
          <p>
            活动解释权在法律范围内由药易购所有，如有疑问请拨打400-6028-262咨询;
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//引入保存所有接口的url文件
import url from "../../axios/apiUrl";
//引入api.js定义的方法index
import { postRequest } from "../../api/index";
import { getRequest } from "../../api/indexGet";
export default {
  data() {
    return {
      isSign: false,
      poings: {},
      year: 0, //年
      month: 0, //月
      date: 0, //日
      allDate: [], //当前月天数
      pointDate: [], //签到的天数
      btnShow: true,
      currentPage: 1
    };
  },
  created() {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.date = date.getDate();
    if (this.date < 10) {
      this.date = "0" + this.date;
    }
    this.getDay(); //调用当前月的天数
    for (let i = 1; i <= this.getDay(); i++) {
      if (i < 10) {
        i = "0" + i;
      }
      this.allDate.push({ points: null, date: i });
    }
    this.pointDate = [];
    getRequest(url.signInfo).then(res => {
      this.poings = res.data.content;
      this.poings.items.map((obj, index) => {
        // 截取到日
        this.pointDate.push(obj.signTime.substring(8, 10));
        // 判断今天是否签到
        if (this.date == obj.signTime.substring(8, 10)) {
          this.isSign = true;
        } else {
          this.isSign = false;
        }
        // 获取签到的每日积分()
        this.allDate.map((v, i) => {
          if (v.date == obj.signTime.substring(8, 10)) {
            v.points = obj.point + "积分";
          }
        });
      });
      this.getColor();
    });
  },
  methods: {
    // 点击签到
    signIn() {
      getRequest(url.pointsSign).then(res => {
        if (res.data.content) {
          this.isSign = true;
          // 给签到图片设置旋转样式
          document
            .querySelector("#target")
            .classList.add("animated", "flipOutY");
          setTimeout(function() {
            document.querySelector("#target").classList.remove("flipOutY");
          }, 1000);
          // 改变签到天数
          this.poings.frequency += 1;
          this.poings.continuousSignIn += 1;
          document.querySelector(
            "#" + "bgColor" + this.date
          ).style.backgroundColor = "#3dbb2b";
          // 点击签到给每日添加积分
          this.allDate.map((v, i) => {
            if (v.date == this.date) {
              if (
                this.poings.continuousSignIn >= 1 &&
                this.poings.continuousSignIn <= 7
              ) {
                v.points = "50积分";
              } else if (
                this.poings.continuousSignIn >= 8 &&
                this.poings.continuousSignIn <= 14
              ) {
                v.points = "150积分";
              } else if (
                this.poings.continuousSignIn >= 15 &&
                this.poings.continuousSignIn <= 21
              ) {
                v.points = "300积分";
              } else if (
                this.poings.continuousSignIn >= 22 &&
                this.poings.continuousSignIn <= 31
              ) {
                v.points = "500积分";
              }
            }
          });
          if (
            this.poings.continuousSignIn >= 1 &&
            this.poings.continuousSignIn <= 7
          ) {
            this.poings.totalPoint += 50;
          } else if (
            this.poings.continuousSignIn >= 8 &&
            this.poings.continuousSignIn <= 14
          ) {
            this.poings.totalPoint += 150;
          } else if (
            this.poings.continuousSignIn >= 15 &&
            this.poings.continuousSignIn <= 21
          ) {
            this.poings.totalPoint += 300;
          } else if (
            this.poings.continuousSignIn >= 22 &&
            this.poings.continuousSignIn <= 31
          ) {
            this.poings.totalPoint += 500;
          }
        } else {
          this.$toast(res.data.message);
        }
      });
    },
    // 获取当前月的天数
    getDay: function() {
      this.month = parseInt(this.month, 10);
      var temp = new Date(this.year, this.month, 0);
      return temp.getDate();
    },
    getColor() {
      this.allDate.map(val => {
        this.pointDate.map(obj => {
          if (val.date == obj) {
            document.querySelector(
              "#" + "bgColor" + obj
            ).style.backgroundColor = "#3dbb2b";
          }
        });
      });
    }
  },
  mounted() {
    this.getColor();
  }
};
</script>
<style lang="less" scoped>
.sign {
  width: 100%;
  .sign_main {
    .sign_title {
      width: 100%;
      height: 5.4rem;
      box-sizing: border-box;
      z-index: #6666;
      position: relative;
      top: 0;
      left: 0;
      img {
        width: 100%;
        height: 5.4rem;
        position: relative;
        top: 0;
        left: 0;
      }
      .sign_centar {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        bottom: 50%;
        margin-top: -2.4rem;
        text-align: center;
        .sign_list {
          // display: flex;
          // justify-content: center;
          text-align: center;
          padding-top: 12px;
          padding-bottom: 12px;
          img {
            width: 3.2rem;
            height: 3.2rem;
            box-sizing: border-box;
          }
        }
        .span {
          text-align: center;
          margin: 0 auto;
          color: #ffffff;
          font-weight: 500;
        }
      }
    }
    .sign_center {
      padding: 0.2rem;
      .sign_data {
        color: #1db807;
        font-size: 24px;
        font-weight: bold;
      }
      .date {
        // margin-top: 0.26rem;
        ul {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .lic {
            width: 120px;
            height: 146px;
            margin: 12px;
            text-align: center;
            .bgColor {
              width: 120px;
              height: 110px;
              border-radius: 0.1rem 0.1rem 0 0;
              padding: 0.02rem 0 0 0;
              background-color: #ccc;
              display: block;
              .dayPoint {
                margin-top: 12px;
                color: #ffffff;
              }
              .bgImg {
                width: 56px;
                height: 56px;
                background: url("../../assets/image/sign_log.png") no-repeat;
                background-size: 100% 100%;
                margin: 6px auto;
              }
            }
            .font14 {
              width: 120px;
              text-align: center;
              height: 36px;
              line-height: 36px;
              background: #f2f2f2;
              color: #888888;
              border-radius: 0 0 0.1rem 0.1rem;
            }
          }
        }
      }
    }
    .footer {
      padding: 20px;
      margin-top: 20px;
      .footer_title {
        display: flex;
        justify-content: right;
        font-size: 26px;
        font-weight: bold;
        color: #343434;
        .iii {
          width: 24px;
          height: 24px;
          background-color: #ff797f;
          color: #ffffff;
          border-radius: 0.36rem;
          text-align: center;
          align-items: center;
          margin-right: 0.2rem;
          font-size: 12px;
        }
      }
      .conter {
        color: #666666;
        font-size: 0.38rem;
        line-height: 0.56rem;
        margin-top: 0.24rem;
        p {
          font-weight: 500;
        }
      }
    }
  }
}
</style>